<template>
	<view class="page">
		<!-- 页面头部 -->
		<view class="hero-sub">
			<text class="hero-title">传承人风采</text>
			<text class="hero-subtitle">匠心传承，技艺永续</text>
		</view>

		<!-- 传承人介绍 -->
		<view class="section inheritors-section">
			<text class="section-title">非遗传承人</text>
			<view class="inheritors-grid">
				<view class="inheritor-card" v-for="(item, index) in inheritors" :key="index">
					<view class="inheritor-avatar">
						<image :src="item.image" class="avatar-img" mode="aspectFill"></image>
						<view class="level-badge">{{item.level}}</view>
					</view>
					<view class="inheritor-info">
						<text class="inheritor-name">{{item.name}}</text>
						<text class="inheritor-title">{{item.title}}</text>
						<view class="skills-tags">
							<text class="skill-tag" v-for="(skill, skillIndex) in item.skills"
								:key="skillIndex">{{skill}}</text>
						</view>
						<text class="inheritor-desc">{{item.description}}</text>
						<view class="inheritor-stats">
							<view class="stat-item">
								<text class="stat-number">{{item.experience}}</text>
								<text class="stat-label">从艺年限</text>
							</view>
							<view class="stat-item">
								<text class="stat-number">{{item.students}}</text>
								<text class="stat-label">培养学生</text>
							</view>
							<view class="stat-item">
								<text class="stat-number">{{item.awards}}</text>
								<text class="stat-label">获得奖项</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 传承谱系 -->
		<view class="section">
			<text class="section-title">传承谱系</text>
			<view class="lineage-tree">
				<view class="lineage-level" v-for="(item, index) in lineage" :key="index">
					<text class="lineage-title">{{item.generation}}</text>
					<view class="lineage-members">
						<view class="lineage-member" v-for="(member, memberIndex) in item.members" :key="memberIndex">
							<image :src="member.image" class="member-avatar" mode="aspectFill"></image>
							<text class="member-name">{{member.name}}</text>
							<text class="member-period">{{member.period}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 传承成就 -->
		<view class="section achievements-section">
			<text class="section-title">传承成就</text>
			<view class="achievements-grid">
				<view class="achievement-item" v-for="(item, index) in achievements" :key="index">
					<view class="achievement-icon">
						<text class="icon">{{item.icon}}</text>
					</view>
					<text class="achievement-title">{{item.title}}</text>
					<text class="achievement-desc">{{item.description}}</text>
					<text class="achievement-year">{{item.year}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 主要传承人信息
				inheritors: [
				  {
				    image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%93%8F%E4%BB%8E%E5%9B%BD.jpg',
				    name: '哏从国',
				    title: '国家级非物质文化遗产传承人',
				    level: '国家级',
				    skills: ['葫芦丝制作', '演奏技法', '传统工艺'],
				    description: '从事葫芦丝制作和演奏40余年，是梁河葫芦丝制作技艺的代表性传承人。其制作的葫芦丝音色纯正，深受广大葫芦丝爱好者喜爱。',
				    experience: '40+',
				    students: '200+',
				    awards: '15+'
				  },
				  {
				    image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%93%8F%E5%BE%B7%E5%85%A8%E7%85%A7%E7%89%87.jpg',
				    name: '哏德全',
				    title: '省级非物质文化遗产传承人',
				    level: '省级',
				    skills: ['传统演奏', '技艺传承', '文化推广'],
				    description: '梁河葫芦丝演奏技艺的杰出代表，致力于葫芦丝文化的传承与发展，培养了众多优秀的葫芦丝演奏者。',
				    experience: '35+',
				    students: '150+',
				    awards: '12+'
				  },
				  {
				    image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%80%AA%E5%BC%80%E5%AE%8F.jpg',
				    name: '倪开宏',
				    title: '州级非物质文化遗产传承人',
				    level: '州级',
				    skills: ['创新演奏', '教学研究', '曲目创作'],
				    description: '在传承传统技艺的基础上，积极创新演奏技法，创作了多首具有地方特色的葫芦丝曲目。',
				    experience: '25+',
				    students: '100+',
				    awards: '8+'
				  },
				  {
				    image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E9%BE%9A%E5%85%A8%E5%9B%BD.webp',
				    name: '龚全国',
				    title: '县级非物质文化遗产传承人',
				    level: '县级',
				    skills: ['传统制作', '音律调试', '维修保养'],
				    description: '专注于葫芦丝制作工艺的钻研，在传统制作技艺的基础上，不断改进制作工艺，提升乐器品质。',
				    experience: '20+',
				    students: '80+',
				    awards: '6+'
				  }
				],
				
				// 传承谱系
				lineage: [
				  {
				    generation: '第一代传承人',
				    members: [
				      {
				        image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%93%8F%E4%BB%8E%E5%9B%BD.jpg',
				        name: '哏从国',
				        period: '1980年至今'
				      }
				    ]
				  },
				  {
				    generation: '第二代传承人',
				    members: [
				      {
				        image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%93%8F%E5%BE%B7%E5%85%A8%E7%85%A7%E7%89%87.jpg',
				        name: '哏德全',
				        period: '1985年至今'
				      },
				      {
				        image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%80%AA%E5%BC%80%E5%AE%8F.jpg',
				        name: '倪开宏',
				        period: '1995年至今'
				      }
				    ]
				  },
				  {
				    generation: '第三代传承人',
				    members: [
				      {
				        image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E9%BE%9A%E5%85%A8%E5%9B%BD.webp',
				        name: '龚全国',
				        period: '2000年至今'
				      },
				      {
				        image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%80%AA%E5%BC%80%E5%AE%8F.jpg',
				        name: '李明华',
				        period: '2005年至今'
				      },
				      {
				        image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%93%8F%E5%BE%B7%E5%85%A8%E7%85%A7%E7%89%87.jpg',
				        name: '张文秀',
				        period: '2008年至今'
				      }
				    ]
				  }
				],
				
				// 传承成就
				achievements: [
				  {
				    icon: '🏆',
				    title: '国家级认定',
				    description: '梁河葫芦丝制作技艺被列入国家级非物质文化遗产名录',
				    year: '2008年'
				  },
				  {
				    icon: '🎵',
				    title: '文化传播',
				    description: '葫芦丝音乐走出云南，在全国各地广泛传播',
				    year: '2010年'
				  },
				  {
				    icon: '👨‍🏫',
				    title: '人才培养',
				    description: '累计培养葫芦丝传承人和爱好者超过1000人',
				    year: '2015年'
				  },
				  {
				    icon: '🌍',
				    title: '国际交流',
				    description: '葫芦丝艺术在国际文化交流中展现中华文化魅力',
				    year: '2018年'
				  },
				  {
				    icon: '📚',
				    title: '理论研究',
				    description: '出版多部葫芦丝制作和演奏理论专著',
				    year: '2020年'
				  },
				  {
				    icon: '🎪',
				    title: '创新发展',
				    description: '结合现代科技，推动葫芦丝制作工艺现代化',
				    year: '2022年'
				  }
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/inheritors/inheritors.wxss */
	.page {
		background-color: $uni-light-color;
		min-height: 100vh;
	}

	/* 页面头部 */
	.hero-sub {
		background: linear-gradient(135deg, $uni-primary-color 0%, $uni-secondary-color 100%);
		padding: 60rpx 30rpx 50rpx;
		text-align: center;
		color: white;
		margin-bottom: 20rpx;
	}

	.hero-title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.hero-subtitle {
		font-size: 26rpx;
		opacity: 0.9;
	}

	/* 通用section样式 */
	.section {
		padding: 60rpx 30rpx;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		color: $uni-primary-color;
		margin-bottom: 40rpx;
		line-height: 1.2;
	}

	/* 传承人section */
	.inheritors-section {
		background-color: white;
		border-radius: 24rpx;
		margin: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		padding: 40rpx 30rpx;
	}

	/* 传承人网格 */
	.inheritors-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 32rpx;
	}

	@media (min-width: 768rpx) {
		.inheritors-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.inheritor-card {
		background-color: $uni-light-color;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.inheritor-card:active {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	/* 传承人头像 */
	.inheritor-avatar {
		position: relative;
		width: 100%;
		height: 280rpx;
		overflow: hidden;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.level-badge {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background-color: $uni-primary-color;
		color: white;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: bold;
	}

	/* 传承人信息 */
	.inheritor-info {
		padding: 28rpx 24rpx;
	}

	.inheritor-name {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-primary-color;
		margin-bottom: 8rpx;
		display: block;
	}

	.inheritor-title {
		font-size: 24rpx;
		color: $uni-accent-color;
		margin-bottom: 20rpx;
		display: block;
	}

	/* 技能标签 */
	.skills-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
		margin-bottom: 16rpx;
	}

	.skill-tag {
		background-color: $uni-secondary-color;
		color: white;
		padding: 4rpx 10rpx;
		border-radius: 14rpx;
		font-size: 18rpx;
		font-weight: 500;
	}

	.inheritor-desc {
		font-size: 24rpx;
		line-height: 1.6;
		color: $uni-text-color;
		margin-bottom: 20rpx;
		text-align: justify;
	}

	/* 统计信息 */
	.inheritor-stats {
		display: flex;
		justify-content: space-between;
		border-top: 2rpx solid #eee;
		padding-top: 20rpx;
	}

	.stat-item {
		text-align: center;
		flex: 1;
	}

	.stat-number {
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-primary-color;
		display: block;
		margin-bottom: 4rpx;
	}

	.stat-label {
		font-size: 20rpx;
		color: var(--text-color);
	}

	/* 传承谱系 */
	.lineage-tree {
		background-color: white;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.lineage-level {
		margin-bottom: 40rpx;
	}

	.lineage-level:last-child {
		margin-bottom: 0;
	}

	.lineage-title {
		font-size: 28rpx;
		font-weight: bold;
		color: var(--primary-color);
		margin-bottom: 20rpx;
		display: block;
		text-align: center;
	}

	.lineage-members {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 30rpx;
	}

	.lineage-member {
		text-align: center;
		width: 120rpx;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		object-fit: cover;
		margin: 0 auto 10rpx;
		border: 3rpx solid var(--accent-color);
	}

	.member-name {
		font-size: 22rpx;
		font-weight: 500;
		color: var(--text-color);
		margin-bottom: 4rpx;
		display: block;
	}

	.member-period {
		font-size: 18rpx;
		color: var(--accent-color);
	}

	/* 传承成就 */
	.achievements-section {
		background-color: white;
		border-radius: 24rpx;
		margin: 0 20rpx 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		padding: 40rpx 30rpx;
	}

	.achievements-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24rpx;
	}

	@media (min-width: 480rpx) {
		.achievements-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 768rpx) {
		.achievements-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.achievement-item {
		text-align: center;
		padding: 24rpx 20rpx;
		background-color: var(--light-color);
		border-radius: 18rpx;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.achievement-item:active {
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.achievement-icon {
		font-size: 48rpx;
		margin-bottom: 15rpx;
	}

	.icon {
		display: inline-block;
	}

	.achievement-title {
		font-size: 26rpx;
		font-weight: bold;
		color: var(--primary-color);
		margin-bottom: 10rpx;
		display: block;
	}

	.achievement-desc {
		font-size: 22rpx;
		line-height: 1.5;
		color: var(--text-color);
		margin-bottom: 10rpx;
		text-align: center;
	}

	.achievement-year {
		font-size: 20rpx;
		color: var(--accent-color);
		font-weight: 500;
	}
</style>